<template>
    <div class="content-page">
         <el-tabs v-model="currentTab" class="content-tabs">
             <el-tab-pane
                v-for="tab in tabList"
                :key="tab.key"
                :label="tab.name"
                :name="tab.key">
                <component class="content-wrap" :is="componentMap[tab.key]" :current-tab="currentTab"></component>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>

<script setup>
import BannerWrap from './part/banner.vue';
import NewsWrap from './part/news.vue';
import NoticeWrap from './part/notice.vue';
import StarWrap from './part/star.vue';
import ShortcutWrap from './part/shortcut.vue';
import { ref } from 'vue';

let currentTab = ref('banner');

let tabList = ref([
    {
        name: 'Banner管理',
        key: 'banner'
    },
    {
        name: '新闻咨询管理',
        key: 'news'
    },
    {
        name: '通知公告管理',
        key: 'notice'
    },
    {
        name: '研修之星管理',
        key: 'star'
    },
    {
        name: '快捷入口管理',
        key: 'shortcut'
    }
]);

const componentMap = {
    'banner': BannerWrap,
    'news': NewsWrap,
    'notice': NoticeWrap,
    'star': StarWrap,
    'shortcut': ShortcutWrap
};

</script>

<style lang="scss" scoped>
.content-page {
    .content-tabs {
        padding-top: 5px;
    }
    .content-wrap {
        padding: 20px;
    }
}
</style>